<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        img {
            display: block;
        }
        .news-list {
            width: 100vw;
            height: auto;
        }
        .news {
            width: 100%;
            height: 200px;
            display: grid;
            grid-template-columns: 300px 1fr;
            outline: 1px solid red;
            margin-bottom: 16px;
        }
        .news>div {
            height: 100%;
        }
        .img-wrapper img {
            height: 100%;
            width: 100%;
        }
        .info-wrapper {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 2fr 2fr 1fr;
            box-sizing: border-box;
            padding: 16px 8px;
        }
        .title {
            font-size: 24px;
            display: flex;
            align-items: center;
        }
        .tags .tag {
            height: 20px;
            width: auto;
            outline: 1px solid red;
            margin-right: 16px;
            margin-bottom: 8px;
            float: left;
        }
        .info>div {
            float: left;
            margin-right: 16px;
        }
        .info .comment {
            float: right;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="news-list"></div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../../demo/jq/jq.js"></script>
    <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
    <script>

        const BASE_URL = 'http://www.liulongbin.top:3006';

        // 数据相关
        async function getData () {
            const res = await axios({
                method: 'GET',
                url: BASE_URL + '/api/news',
            });
            return res.data.data;
        }

        // view 层
        function render (data) {
            if (!Array.isArray(data)) {
                $('.news-list').append($('<div class="error">出错了...</div>'));
                return;
            }
            for (const item of data) {
                const tags = item.tags.split(',');
                const el = $(`
                    <div class="news">
                        <div class="img-wrapper">
                            <img src="${ BASE_URL + item.img }" alt="">
                        </div>
                        <div class="info-wrapper">
                            <div class="title">${ item.title }</div>
                            <div class="tags">
                                ${ tags.map((tag) => `<div class="tag">${ tag }</div>`).join('') }
                            </div>
                            <div class="info">
                                <div class="author">${ item.source }</div>
                                <div class="date">${ moment(item.time).format('YYYY.MM.DD HH:mm:ss') }</div>
                                <div class="comment">评论数：${ item.cmtcount }</div>
                            </div>
                        </div>
                    </div>
                `);
                $('.news-list').append(el);
            }
        }

        getData()
            .then((data) => {
                render(data);
            })
            .catch((err) => {
                render(err);
            });

    </script>
</body>
</html>